<template>
  <el-row>
    <ul>
      <li v-for="item in showV1" :key="item.title" :title="item.title" @click="handleClick(item.link)">
        <el-col :span="6" class="animate__animated animate__fadeInUp">
          <el-card shadow="hover" class="wj-el-card" :body-style="{ padding: '0px' }">
            <img :src="item.image" class="image">
            <div style="padding: 14px;">
              <span>{{item.title}}</span>
            </div>
          </el-card>
        </el-col>
      </li>
    </ul>
  </el-row>
</template>

<script>
  import {showV1} from "@/mock-data/home";

  export default {
    name: "wj-show-v1",
    data() {
      return {
        showV1
      }
    },
    methods: {
      handleClick(link) {
        this.$router.push(link);
      }
    }
  }
</script>

<style scoped>

  .image {
    width: 100px;
    height: 100px;
  }

  .el-col-6 {
    text-align: center;
    cursor: pointer;
  }

  .wj-el-card {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    background: #fff;
  }

  .el-card.is-hover-shadow:hover {
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3);
  }

</style>